<style lang="less">
@import "./login.less";
</style>

<template>
  <div class="login">
    <div class="login-logo">
      <p class="backimg-title" :style="{ top: top+'px','font-size':fontSize+'px'}">质检云 | 施工管理质量检测系统</p>
    </div>
    <div class="login-right">
      <img class="logo" src="../../assets/images/login/zjy_logo.png" />
      <div class="login-con" :style="{'margin-top':marginTop+'px'}">
        <Card :bordered="false" class="log-in" icon="log-in" :dis-hover="true">
          <div class="change-title">
            <p class="p-title">登录</p>
            <!-- <p class="p-title" style="font-weight:normal;cursor: not-allowed">
              注册
            </p> -->
          </div>
          <div class="form-con">

            <login-form @on-success-valid="handleSubmit" :isShowError="isShow"></login-form>

            <!-- <p class="login-tip">
          <a href="#">忘记密码?</a>
            </p>-->
          </div>
        </Card>
      </div>
      <p class="footer-title" :style="{'margin-top':spaceBetween+'px'}">中北数创科技有限公司</p>
    </div>
  </div>
</template>

<script>
import LoginForm from './login-form';
import { mapActions } from 'vuex';
import { debounce } from '@/libs/debounceThrottle';
export default {
  components: {
    LoginForm
  },
  data () {
    return {
      isShow: 0,
      top: 360,
      fontSize: 36,
      marginTop: 400,
      spaceBetween: 110
    };
  },
  mounted () {
    window.onresize = debounce(this, function (e) {
      this.resize();
    }, 500);
    this.resize();
  },
  methods: {
    ...mapActions(['handleLogin', 'getUserInfo']),

    handleSubmit ({ username, password }) {
      // this.$router.push({
      //   name: this.$config.homeName
      // });

      this.handleLogin({ username, password }).then((res) => {
        this.isShow = 0;
        this.getUserInfo().then(res => {
          this.$router.push({
            name: this.$config.homeName
          });
        });
      }).catch(err => {
        // 如果返回状态吗为1013说明该账号已被冻结
        if (err.data.code == 1013) {
          this.isShow = 1;
        } else {
          this.isShow = 2;
        }
      });
    },
    resize () {
      const w =
        window.innerWidth ||
        document.documentElement.clientWidth || // 获取pc的宽，一般在pc上调试的时候用
        document.body.clientWidth;
      if (w <= 1396) {
        this.top = 280;
        this.fontSize = 32;
        this.marginTop = 340;
        this.spaceBetween = -30;
      } else {
        this.top = 360;
        this.fontSize = 36;
        this.marginTop = 400;
        this.spaceBetween = 110;
      }
    }
  }
};
</script>

<style lang="less">
.login {
  width: 100%;
  display: flex;
  overflow: hidden;
  .login-logo,
  .login-right {
    width: 50%;
    overflow: hidden;
    position: relative;
    .system-title {
      font-size: 30px;
      color: #5c6fc2;
      margin-top: 130px;
      text-align: center;
    }
    // .log-in:hover {
    //   box-shadow: #c8c8c8 0px 1px 5px;
    // }
    .footer-title {
      color: #666666;
      text-align: center;
      margin-top: 50px;
    }
  }
  .login-logo {
    background-image: url("../../assets/images/login/left.png");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    .backimg-title {
      color: #fff;
      font-size: 40px;
      vertical-align: middle;
      position: fixed;
      left: 25%;
      transform: translate(-50%);
    }
  }
  .login-right {
    .logo {
      display: block;
      width: 120px;
      height: auto;
      position:fixed;
      right:6%;
      top:70px;
    }
    .login-con{
      margin-top:400px
    }
  }
}
</style>
